<template>
  <el-dialog draggable :title="dialog.title" v-model="dialog.isShowDialog" width="620px" :close-on-click-modal="false" destroy-on-close>
    <el-form ref="FormRef" :model="roleForm" :rules="rules" label-width="80px">
      <el-form-item label="角色标识" prop="roleKey">
        <el-input v-model="roleForm.roleKey" placeholder="请输入角色标识" clearable :maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" clearable :maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="角色描述" prop="remark">
        <el-input
          v-model="roleForm.remark"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 6 }"
          placeholder="请输入角色描述"
          :maxlength="150"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit(FormRef)">
          {{ dialog.submitTxt }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="editRole">
  import { useRoleApi } from '@/api/role-api.js';
  import { DialogType, RStatus } from '@/common/comstants.js';

  // 角色默认信息
  const roleInitInfo = {
    roleKey: '', // 角色标识
    roleName: '', // 角色名
    remark: '', // 角色描述
  };
  let roleForm = ref({ ...roleInitInfo });

  // 定义子组件向父组件传值/事件
  const _emit = defineEmits(['refresh']);

  // 用户表单Ref
  const FormRef = ref();

  // 弹框
  const dialog = reactive({
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  });
  // 添加的loading
  const loading = ref(false);

  // 规则
  const rules = reactive({
    roleKey: [
      { required: true, message: '请输入角色标识', trigger: 'blur' },
      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
    ],
    roleName: [
      { required: true, message: '请输入角色名称', trigger: 'blur' },
      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
    ],
  });

  /** 打开弹框 */
  const openDialog = (type = DialogType.ADD, row) => {
    dialog.isShowDialog = true;
    dialog.type = type;

    if (type === DialogType.EDIT) {
      roleForm.value = row;
      dialog.title = '修改用户';
      dialog.submitTxt = '修 改';
      return;
    }

    dialog.title = '新增用户';
    dialog.submitTxt = '新 增';
    //重置表单
    roleForm.value = { ...roleInitInfo };
  };

  /** 关闭弹窗 */
  const closeDialog = () => {
    dialog.isShowDialog = false;
  };

  /** 取消 */
  const onCancel = () => {
    closeDialog();
  };

  const onSubmit = async (formEl) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        loading.value = true;
        let operationPromise;
        if (dialog.type === DialogType.ADD) {
          operationPromise = useRoleApi().addRole(roleForm.value);
        } else {
          operationPromise = useRoleApi().updateRole(roleForm.value);
        }

        try {
          const res = await operationPromise;
          if (res.status === RStatus.SUCCESS) {
            ElMessage.success(res.message);
          }
          _emit('refresh');
          closeDialog();
        } finally {
          loading.value = false;
        }
      }
    });
  };

  // 暴露变量
  defineExpose({
    openDialog,
  });
</script>

<style lang="scss" scoped>
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;

    .el-button {
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s ease;

      &.el-button--primary {
        background-color: #4a90e2;
        border-color: #4a90e2;

        &:hover {
          background-color: #357abd;
          border-color: #357abd;
        }
      }
    }
  }
</style>
@/api/role-api